<template>
  <div class="amap-page-container">
    <div id="amap-demo1" class="amap-demo">
    </div>
  </div>
</template>

<script>
  // NPM 方式
  import { lazyAMapApiLoaderInstance } from 'vue-amap';

  const loadPromise = lazyAMapApiLoaderInstance.load();

  export default {
    data() {
      return {
        map: null
      }
    },
    mounted() {
      this.initMap();
      // this.setMarker()
    },
    methods: {
      initMap() {
        loadPromise.then(() => {
          console.log('-----');
          this.map = new AMap.Map('amap-demo1', {
            center: [113.92679,35.303589],
            zoom: 17,
            resizeEnable: true,
            rotateEnable:true,
            pitchEnable:true,
            pitch:80,
            rotation:-15,
            viewMode:'3D',//开启3D视图,默认为关闭
            buildingAnimation:true,//楼块出现是否带动画

            expandZoomRange:true,
            zooms:[3,20],
            mapStyle: 'amap://styles/darkblue'
          });
          this.setMarker()
        });
      },
      setMarker(){
        if (!this.marker) {
          this.marker = new AMap.Marker({
            icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
            center: [113.92679,35.303589],
            offset: new AMap.Pixel(-13, -30)
          });
          this.marker.setMap(this.map);
        }
      }
    },
  }
</script>

<style scoped>
  .amap-demo {
    height: 98vh;
    width: 100%;
    resize:both;
  }
</style>
